<template>
    <view class="content">


        <!-- 搜索框 -->
	
        <view class="cu-bar bg-green search fixed grid-container " :style="[{top:CustomBar + 'px'}]"
            style="flex-wrap: wrap;padding-bottom: 16rpx;" >
				<view class="search-form round">
				  	<text class="cuIcon-search"></text>
				  	<input type="text" placeholder="请输入客户名称/手机" confirm-type="search" @input="searchCustom"></input>
				</view>
				<view class="picker-selected-value">
					<picker  mode="selector" @change="returnPickerStatus" range-key="name" :range="statusOptions" >
						<view>
							{{statusOptions[status]?statusOptions[status].name:'请选择流程节点'}}
						</view>
					</picker>
				</view>
				<view class="picker-selected-value">
					<picker  mode="selector" @change="returnPickerUsers" range-key="name" :range="users" >
						<view>
							{{users[staff]?users[staff].name:'全部员工'}}
						</view>
					</picker>
				</view>
				 <view class="picker-container">
				   <view class="picker-item">
				     <view class="picker-item-title">开始日期 :</view>
				     <picker mode="date" :value="startDate" start="2024-01-01" :end="todayDate" @change="bindStartDateChange">
				       <view>{{startDate}}</view>
				     </picker>
				   </view>
				   <view class="picker-item">
				     <view class="picker-item-title">结束日期 :</view>
				     <picker mode="date" :value="endDate" start="2024-01-01" :end="todayDate" @change="bindEndDateChange">
				       <view>{{endDate}}</view>
				     </picker>
				   </view>
				 </view>
        </view>




        <!-- 排序、高级筛选 -->
        <!-- <view class="screen-cont">
		</view> -->
        <mescroll-uni top="120upx" class="my-mescroll" ref="mescrollRef" @init="mescrollInit" :down="downOption"
            :up="upOption" @down="downCallback" @up="upCallback">

            <u-sticky offset-top="0">
                <view style="background-color: #f5f5f5;padding-top:100px">
                    <u-tabs  :list="tabs" @click="tab_change" :scrollable="false"></u-tabs>
                </view>
            </u-sticky>

            <!-- 客户列表 -->
            <view class="cus-list">
                <view class="item" @click="showCusDetail(item)" v-for="(item, index) in dataList">
                    <view class="head">
                        <text class="text">
                            {{item.customerName}}
                            <text style="color: red;padding-left: 10rpx;"
                                v-if="item.approvalStatus == 2">(信息审核失败)</text>
                            <text style="color: red;padding-left: 10rpx;"
                                v-if="(role=='业务主管'||role=='董事长') && !item.userNickName">(未分配业务员)</text> <text
                                style="color: red;padding-left: 10rpx;"
                                v-if="role=='贷后主管' && !item.postNickName">(未分配贷后)</text> <text
                                style="color: red;padding-left: 10rpx;"
                                v-if="role=='执行主管' && !item.impNickName">(未分配执行)</text>
                        </text>

                        <view class="btn-box">
                            <view
                                :class="[item.status!=1?'deal-btn un-deal':'deal-btn deal',['cbg1','cbg2','cbg3'][item.cirStatus],'wAuto']">
                                {{['流转中','未促成','已促成'][item.cirStatus]}}-
                                {{utils.getDictLabelName("customerUserStatus",item.status)}}
                            </view>
                        </view>

                    </view>
                    <view class="cus-info">
                        <view class="info-item flex">
                            <text class="left">
                                金融顾问：{{item.userNickName}}
                            </text>
                        </view>
                       <!-- <view class="info-item flex">
                            <text class="left" v-if="!item.postNickName">
                                客服人员：未分配
                            </text>
							<text class="left" v-else>
							    客服人员：{{item.postNickName}}
							</text>
                        </view> -->
						<view class="info-item">
						    <text class="left">录入时间：{{item.createTime}}</text>
						</view>
                        <view class="info-item">
                            <text class="left">最后跟进：{{item.lastTime}}</text>
                        </view>
                    </view>
                </view>

            </view>
        </mescroll-uni>
    </view>
</template>

<script>
    import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
    import api from '@/api/api.js';
    export default {
        mixins: [MescrollMixin],
        data() {
            return {
				todayDate:'',
				startDate: '',
				endDate: '',
                mescroll: undefined,
                downOption: {
                    auto: false //是否在初始化后,自动执行downCallback; 默认true
                },
                upOption: {
                    onScroll: true,
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        tip: '暂无相关数据'
                    }
                },
				staff: '', //员工列表
				userId:'',
				fromId:'',
                dataList: [],
                searchContent: '',
                tabs: [
                    { name: '全部' },
                    { name: '流转中' },
                    { name: '未促成' },
                    { name: '已促成' },
                ],
				status:0,
				statusOptions:[
					{id:1,name:'全部节点'},
					{id:2,name:'客户建档'},
					{id:3,name:'等待邀约'},
					{id:4,name:'邀约失败'},
					{id:5,name:'上传征信'},
					{id:6,name:'拒传征信'},
					{id:7,name:'上传合同'},
					{id:8,name:'拒传合同'},
					{id:9,name:'等待执行'},
					{id:10,name:'放款成功'},
					{id:12,name:'放款失败'}
				],
				users:[],
                cirStatus: -1,
            }
        },
        onLoad() {
            // 修改顶部导航背景色
            uni.setNavigationBarColor({
                frontColor: '#ffffff',
                backgroundColor: '#39b54a',
                animation: {
                    duration: 400,
                    timingFunc: 'easeIn'
                }
            })
			this.setInitTime();
			console.log("uuu");
			this.getUsersByDept();
			
        },
        onShow() {
            this.mescroll.resetUpScroll()
            if (this.getS('token')) {
                api.getResMsgCount().then(r => {
                    if (r.counts - 0 <= 0) return
                    uni.setTabBarBadge({
                        index: 2,
                        text: r.counts + ''
                    })
                })
            }
        },
		
        methods: {
            tab_change(e) {
                let i = e.index
                this.cirStatus = i - 1
                this.getMyCustomerList({ num: 1 })
            },
            // mescroll组件初始化的回调,可获取到mescroll对象
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            /*下拉刷新的回调 */
            downCallback(mescroll) {
                mescroll.resetUpScroll()
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
                this.getMyCustomerList(page);
            },
			getUsersByDept(){
				api.getDeptUsersByUser().then(
					res => {
						this.users = res.userList;
					console.log(res);
				});
			},
            getMyCustomerList(page) { //poolStatus: 0,
				var status = this.status - 1 ;
                var data = { page: page.num, searchVal: this.searchContent};
				if (status > -1) data.status = status;
                if (this.cirStatus > -1) data.cirStatus = this.cirStatus
				if (this.userId > 0 )data.fromId = this.userId
				if (this.startDate) data.beginDate = this.startDate
				if (this.endDate) data.endDate = this.endDate
                var that = this;
                api.getMyCustomerList(data).then(
                    res => {
                        if (res.code == 200) {
                            //设置列表数据
                            if (page.num == 1) {
                                that.dataList = res.data.list;

                            } else {
                                that.dataList = that.dataList.concat(res.data.list);

                            }
                            that.mescroll.endBySize(res.data.list.length, res.data.total);

                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: "请求失败",
                            });
                            that.dataList = null;
                            mescroll.endErr();
                            // that.mescroll.endSuccess(0);
                        }
                    },
                    rej => {}
                );
            },
            // 顶部搜索
            searchCustom(e) {
                let key = e.detail.value
                this.searchContent = key;
                this.upCallback({ num: 1, size: 10 })
            },
			returnPickerStatus(e) {
			    this.status = e.detail.value
				this.upCallback({ num: 1, size: 10 })
			},
			returnPickerUsers(e){
				this.staff = e.detail.value
				this.userId = this.users[e.detail.value].id;
				this.upCallback({ num: 1, size: 10 })
			},
			setNum(num){
			  if(num < 10){
			    return '0' + num;
			  }else{
			    return num;
			  }
			},
			setInitTime(){
			  let thisTime = new Date();
			  this.todayDate = thisTime.getFullYear() + '-' + this.setNum(thisTime.getMonth() + 1) + '-' + this.setNum(thisTime.getDate());
			  let startTime = new Date(thisTime - (24 * 60 * 60 * 1000 * 6));
			  this.startDate = startTime.getFullYear() + '-' + this.setNum(startTime.getMonth() + 1) + '-' + this.setNum(startTime.getDate());
			  this.endDate = this.todayDate;
			  this.upCallback({ num: 1, size: 10 })
			},
			bindStartDateChange(e) {
			  if(new Date(e.detail.value) > new Date(this.endDate)){
			    // 开始时间不可大于结束时间
			    this.startDate = this.endDate;
			  }else{
			    this.startDate = e.detail.value;
			  }
			  this.upCallback({ num: 1, size: 10 })
			},
			bindEndDateChange(e) {
			  if(new Date(e.detail.value) < new Date(this.startDate)){
			    // 结束时间不可小于开始时间
			    this.endDate = this.startDate;
			  }else{
			    this.endDate = e.detail.value;
			  }
			  this.upCallback({ num: 1, size: 10 })
			},
            // 查看客户详情
            showCusDetail(item) {
                uni.navigateTo({
                    url: './customDetail?customerId=' + item.customerId + '&customerUserId=' + item
                        .customerUserId
                })
            }

        }
    }
</script>

<style scoped lang="scss">
	.picker-container{ 
		height: 60rpx; 
		font-size: 26rpx; 
		display: flex; 
		justify-content: space-around; 
		align-items: center; 
		// border-radius: 10rpx; 
		background-color: #fff;
		border-radius: 40px; /* 圆角 */
		padding-left: 20px;
		padding: 5px; /* 内边距 */
		margin: 0 30upx;
		}
	.picker-item{ padding: 16rpx; display: flex; justify-content: space-around; align-items: center;}
	.picker-item-title{ color:black; white-space: nowrap;}
	.picker-item picker{ flex: 1; color: #8B4F8E; font-weight: bold;}
    .bg-green {
        background-color: #39b54a;
    }
	.grid-container {
	  display: grid;
	  grid-template-columns: 1fr; /* 使每个元素都占满整个容器宽度 */
	  gap: 10px; /* 行间距 */
	}
	.picker-selected-value {
	  padding-left: 20px;
	  border: 1px solid #ccc; /* 边框 */
	  padding: 5px; /* 内边距 */
	  border-radius: 40px; /* 圆角 */
	  background-color: #f9f9f9; /* 背景颜色 */
	  text-align: center;
	  color:black;
	  margin: 0 30upx;
	}
	.custom-picker picker-view { /* 注意：在 UniApp 中直接选择 picker-view 可能不起作用，通常需要通过 JavaScript 控制样式 */
	  background-color: #fff; /* 下拉菜单背景颜色 */
	}
    // 筛选
    // .screen-cont{
    // 	height: 80upx;
    // 	background: #fff;
    // 	margin-top: 100upx;
    // }
    // 客户列表
    .cus-list {
        background: #fff;

        .item {
            padding: 20upx 40upx;
            border-bottom: 1px solid #f7f7f7;

            &:last-child {
                border-bottom: none;
            }

            .head {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .text {
                    font-size: 32upx;
                    color: #000;
                }

                .btn-box {
                    .deal-btn {
                        width: 120upx;
                        text-align: center;
                        padding: 10upx 0;
                        font-size: 24upx;
                        border-radius: 4upx;

                        &.deal {
                            background: #0aAC44;
                            color: #fff;
                        }

                        &.un-deal {
                            background: #EFEFEF;
                            color: #BDBDBD;
                        }
                    }
                }
            }

            .cus-info {
                .info-item {
                    &.flex {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;

                        .img-box {
                            display: flex;
                            align-items: center;

                            .img {
                                width: 40upx;
                                height: 40upx;
                                margin-left: 10upx;
                            }
                        }
                    }

                    .left {
                        font-size: 28upx;
                        color: #737373;
                    }
                }
            }
        }
    }
</style>